<template>
	<view>
		<view class="reg-form">
		    <view>
		        <view class="form-item">
		            <text class="form-item-title">{{$t('General.login.account')}}</text>
		            <input type="number" :style="{'color':color}" :placeholder="$t('General.login.inputPhone')" name="phone" v-model="form.phone" @input="verifyInput('phone')" />
		        </view>
		        <view class="form-item u-f-sbc">
					<view class="u-f-r">
						<text class="form-item-title">{{$t('General.login.password')}}</text>
						<input type="text" :style="{'color':pwdColor}" :password="isShowPass" :placeholder="$t('General.login.enterPassword')" name="password" v-model="form.password" @input="verifyInput('pwd')" />
					</view>
		           <uni-icons v-if="!isShowPass" type="eye" size="25" color="#FF0025" @click="showPassAction"></uni-icons>
		           <uni-icons v-else type="eye-slash" size="25" color="#FF0025" @click="showPassAction"></uni-icons>
		        </view> 
				<view class="form-item u-f-sbc">
					<view class="u-f-r">
						<text class="form-item-title">{{$t('General.login.enterPsw')}}</text>
						<input type="text" :style="{'color':confPwdColor}" :password="isShowPass" :placeholder="$t('General.login.enterPassword')" name="confirmPass" v-model="form.confirmPass" @input="verifyInput('confPwd')" />
					</view>
					<uni-icons v-if="!isShowPass" type="eye" size="25" color="#FF0025" @click="showPassAction"></uni-icons>
					<uni-icons v-else type="eye-slash" size="25" color="#FF0025" @click="showPassAction"></uni-icons>
				</view>
				<!-- <view class="form-item u-f-sbc">
					<view class="u-f-r">
						<text class="form-item-title">验证码</text>
						<input style="width: 230rpx;" type="text" placeholder="请输入验证码" name="verCode" v-model="form.verCode" />
					</view>
				    <view class="">
				    	<view v-if="!isSend" class="send" @click="sendCode">发送</view>
				    	<view v-else class="send">{{seconds}}s后重发</view>
				    </view>
				</view> -->
				<view class="u-f-c" style="margin-top: 30rpx;">
					<view class="u-f-ac" @click="showDesc">
						<img class="info-img" src="https://statics.xmcsrv.net/weixin/Telkomsel/jInfo.png" alt="">
						<view class="reg">{{$t('General.login.pwdRule')}}</view>
					</view>
					<view v-if="isShowDesc" class="pwdDesc" :class="{'red':!isMatch}"> {{$t('General.login.ruleTips')}} </view>
				</view>
		        <view class="form-item form-item-submit" style="margin-top: 50rpx;">
		            <button data-code="600006" data-eventName="click_register_to_next" class="block radius-btn" type="primary" plain form-type="submit" :disabled="disabled" style="margin-bottom: 10rpx" @click="nextAction">{{$t('General.login.nextStep')}}</button>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	let that = null
	const { debounce } = require('@/utils/util.js');
	import { CodeMsg } from '@/utils/errorCode.js'
    import {enCodeMsg} from "@/lang/en-code";
    const {phonePattern,passwordPattern} = require('@/utils/util.js');
	export default {
		data() {
			return {
				seconds:120,
				timer:null,
				isSend:false,
				form:{
					// name:'',
					password:'',
					confirmPass:'',
					phone:'',
					verCode:'',
				},
				isShowDesc:false,
				isMatch:true,
				color: 'red',
				pwdColor: 'red',
				confPwdColor: 'red',
				disabled:false,
				isShowPass:true,
			}
		},
		onLoad() {
			// this.setTimer()
			that = this
		},
        onShow() {
            uni.setNavigationBarTitle({
                title: this.$t('General.login.register')
            })
        },
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			showDesc(){
				this.isShowDesc = !this.isShowDesc
			},
			showPassAction(){
				this.isShowPass = !this.isShowPass
			},
			verifyInput(type) {
				this.verification(type);
			},
			//校验
			verification(type) {
				if(type == 'phone'){
					if (phonePattern(this.form.phone)) {
						this.color = '#000';
					} else {
						this.color = 'red';
					}
				}else if(type == 'pwd'){
					if (passwordPattern(this.form.password)) {
						this.pwdColor = '#000';
					} else {
						this.pwdColor = 'red';
					}
				}else if(type == 'confPwd'){
					if (passwordPattern(this.form.confirmPass)) {
						this.confPwdColor = '#000';
					} else {
						this.confPwdColor = 'red';
					}
				}
			},
			// 发送验证码
			sendCode(info){
				if(!this.form.phone.trim()){
					return uni.showToast({
						title:this.$t('General.login.inputPhone'),
						icon:"none"
					})
				}
				uni.showLoading({
					title:this.$t('General.login.sending')
				})
				let data = {phone:this.form.phone,type:'re',codeSize: 6}
				getApp().globalData.api.sendMobileVerifyCode(data, (result) => {
						console.log('发送',result);
						uni.hideLoading()
						this.disabled = false
						if(result.code == 2000){
							uni.showToast({
								title:this.$t('General.login.sendingSuccess'),
								icon:"none",
							})
							uni.navigateTo({
								url:'/jvss/pagesMine/forget-password/sendCode?sendType=1&data='+JSON.stringify(info)
							})
						}else if(result.code == 4021){
							uni.showModal({
								title:this.$t('General.family.tip'),
								content:this.$t('General.login.msg1'),
								confirmText: this.$t('General.login.toLogin'),
								confirmColor:'#FF0025',
								success: (res) => {
									if(res.confirm){
										// uni.navigateBack({	})
										uni.reLaunch({
											url: '/jvss/pages/login/login'
										});
									}
								}
							})
						}else{
                            let lang = uni.getSystemInfoSync().language
							uni.showToast({
								title: (lang == 'zh-CN'? CodeMsg[result.code] :enCodeMsg[result.code]) || result.msg,
								icon:"none",
							})
							this.$postPointData({code:'400010', eventName:'register_by_phone_vf_code'})
						}
						// this.setTimer()
				},true)
			},
			setTimer(){
				this.isSend = true
				this.timer = setInterval(()=>{
					this.seconds--
					if(this.seconds<1){
						clearInterval(this.timer)
						this.isSend = false
						this.seconds = 120
					}
				},1000)
			},
			nextAction:debounce((e)=>{
				console.log('=========',e);
				that.formSubmit(e)
			}),
			//注册
			formSubmit(e){
				console.log('注册====',e);
				if(!this.form.phone.trim()){
					return uni.showToast({
						title:this.$t('General.login.phonePla'),
						icon:"none"
					})
				}
				if(!phonePattern(this.form.phone)){
					return uni.showToast({
						title:this.$t('General.login.phonePla2'),
						icon:"none"
					})
				}
				if(!this.form.password.trim() || !this.form.confirmPass.trim()){
					return uni.showToast({
						title:this.$t('General.login.pwd_error5'),
						icon:"none"
					})
				}
				if(this.form.password != this.form.confirmPass){
					return uni.showToast({
						title:this.$t('General.login.phonePla3'),
						icon:"none"
					})
				}
				if(!passwordPattern(this.form.password)){
					this.isShowDesc = true
					this.isMatch = false
					return uni.showToast({
						title:this.$t('General.login.phonePla4'),
						icon:"none"
					})
				}else{
					this.isMatch = true
				}
				
				let data = this.form//e.detail.value
				data.account = this.form.phone
				data.isMobile = 1
				this.disabled = true
				this.sendCode(data)
				// uni.navigateTo({
				// 	url:'/jvss/pagesMine/forget-password/sendCode?sendType=1&data='+JSON.stringify(data)
				// })
				// uni.showLoading({
				// 	title:'正在注册'
				// })
				// let data = e.detail.value
				// getApp().globalData.api.mobileRegister(data, (result) => {
				// 	uni.showToast({
				// 		title:'注册成功',
				// 		icon:"none"
				// 	})
				// 	uni.navigateBack({})
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}

.reg-form {
    padding: 0 60rpx;
	margin-top: 80rpx;
	.form-item {
	    display: flex;
	    flex-direction: row;
	    align-items: center;
	    border-bottom: 1px solid #eeeeee;
	    padding: 30rpx 0;
	}
	
	.form-item-title {
	    width: 150rpx;
	}
	.form-item-control {
	    justify-content: space-between;
	    color: #777777;
	    margin-bottom: 80rpx;
	    border-bottom: none;
	}
	.form-item-submit {
	    flex-direction: column;
	    border-bottom: none;
	}
	.agree-button{
		flex:1;
		display: inline !important;
		width: auto !important;
		background:transparent !important;
		padding: 0 !important;
	}
	.agree-button::after{
		border: none;
	}
	.send{
		color: #FF0025;
		border-radius: 8rpx;
		border: 1px solid #FF0025;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
		font-size: 24rpx;
	}
	.forgetPwd{
		color: #666;
		display: flex;
		justify-content: flex-end;
	}
	.info-img {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	.reg{
		color: #FF0025;
		font-size: 26rpx;
	}
	.pwdDesc{
		margin-top: 30rpx;
		color: #000;
		font-size: 26rpx;
	}
	.red{
		color: red;
	}
}
</style>